<template>
  <view class="dataCenterMain">
    <view class="dataCenterBox">
      <!-- total -->
      <view class="swiperMain">
        <view class="swiperView">
          <swiper
            :current="swiper.current"
            class="s-container"
            @change="swiperChange"
            :autoplay="swiper.autoplay"
            :circular="swiper.circular"
            :interval="swiper.interval"
            :duration="swiper.duration"
            previous-margin="40px"
            next-margin="40px"
          >
            <swiper-item
              :class="['swiper-item', swiper.current == index ? 'active' : '']"
              v-for="(item, index) in swiperList"
              :key="index"
              @click="jumpTap(item.type)"
              @change="changeView(item.type)"
            >
              <view class="swiperItemView" :style="{ background: item.bg }">
                <view class="title align-center">
                  <text>{{ item.name }}</text>
                  <u-icon
                    class="xIcon"
                    name="arrow-right"
                    color="#fff"
                    size="28"
                  ></u-icon>
                </view>
                <view class="tip">{{ item.tip }}</view>
                <view class="oneNumber">{{ item.number }}</view>
                <view class="total flex align-center">
                  {{ item.totalName }}
                  <text>{{ item.total }}</text>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <!-- pie -->
      <view class="pieMain">
        <view class="pieBox">
          <view class="title">{{ titleText }}占比</view>
          <view class="charts-box"
            ><qiun-data-charts type="pie" :chartData="pieData"
          /></view>
          <view class="picList">
            <view
              class="item flex align-center justify-between solid-bottom"
              v-for="(item, index) in pieData.series[0].data"
              :key="index"
              v-if="item.number != 0"
            >
              <view>{{ item.name }}</view>
              <view>
                <text>{{ item.number }}</text>
                {{ item.unit }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="lineChartsMain">
        <view class="lineChartsBox">
          <view class="title">{{ titleText }}趋势图</view>
          <view class="charts-box"
            ><qiun-data-charts type="demotype" :chartData="chartsDataLine2"
          /></view>
          <view class="tab flex align-center justify-around">
            <view
              class="solid-right"
              @click="lineTab(0)"
              :class="dayCurrent == 0 ? 'active' : ''"
              >近7天</view
            >
            <view @click="lineTab(1)" :class="dayCurrent == 1 ? 'active' : ''"
              >近30天</view
            >
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
    <!-- 底部导航 -->
    <u-tabbar
      :list="tabBarList"
      :mid-button="false"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :border-top="borderTop"
      mid-button-size="76"
      icon-size="40"
      height="105rpx"
    ></u-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabBarList: [],
      borderTop: true,
      inactiveColor: "#909399",
      activeColor: "#fb4535",
      // 3d swiper
      swiper: {
        current: 0,
        autoplay: false,
        circular: true,
        interval: 6000,
        duration: 500,
      },

      swiperList: [
        {
          bg: "rgba(254,104,63)",
          name: "今日总收益(元)",
          tip: "今日收益",
          totalName: "本月总收益:",
          number: "0.00",
          total: "0.00元",
          type: "income",
        },
        {
          bg: "rgba(252,164,53)",
          name: "今日激活(台)",
          tip: "当天直营和团队激活总台数",
          totalName: "本月激活量:",
          number: "0",
          total: "0台",
          type: "active",
        },
        {
          bg: "rgba(96,182,250)",
          name: "今日总交易(元)",
          tip: "自营和团队所有交易量",
          totalName: "本月交易量:",
          number: "0.00",
          total: "0.00元",
          type: "trade",
        },
      ],
      pieData: {
        series: [
          {
            data: [],
          },
        ],
      },
      lineData: {
        categories: [],
        series: [
          {
            name: "日收益",
            data: [],
          },
        ],
      },
      chartsDataLine2: {},
      limit: 7,
      titleText: "收益",
      dayCurrent: 0,
      type: "income",
    };
  },
  onLoad() {
    this.tabBarList = this.$tabbar.tabbar;
    this.$tools.changeNetword();
  },
  onShow() {
    //数据总计
    this.getTradeStatistics();
    this.getGroupActiveStat();
    this.getUserIncome();
    this.getDatasDataPie();
    this.getDatasDataLine();
  },
  methods: {
    swiperChange(e) {
      let index = e.detail.current;
      this.swiper.current = e.detail.current;
      if (index == 0) {
        this.type = "income";
        this.titleText = "收益";
        this.lineData.series[0].name = "日收益";
      } else if (index == 1) {
        this.type = "active";
        this.titleText = "激活";
        this.lineData.series[0].name = "日激活";
      } else if (index == 2) {
        this.type = "trade";
        this.titleText = "交易";
        this.lineData.series[0].name = "日交易";
      }
      this.getDatasDataPie();
      this.getDatasDataLine();
    },
    jumpTap(type) {
      if (type == "income") {
        uni.switchTab({
          url: "/pages/income/income",
        });
      } else if (type == "active") {
        uni.navigateTo({
          url: "/pages/myMerchant/myMerchant",
        });
      } else {
        uni.navigateTo({
          url: "/pages/trade/trade",
        });
      }
    },
    lineTab(index) {
      this.dayCurrent = index;
      if (index == 0) {
        this.limit = 7;
      } else if (index == 1) {
        this.limit = 30;
      }
      this.getDatasDataLine();
    },
    //交易汇总
    getTradeStatistics() {
      this.$u.api
        .getGroupStatIndex()
        .then((res) => {
          this.swiperList[2].number = res.result.day_trade;
          this.swiperList[2].total = res.result.month_trade;
        });
    },
    //激活汇总
    getGroupActiveStat() {
      this.$u.api
        .getGroupActiveStat()
        .then((res) => {
          this.swiperList[1].number = res.result.todayActive;
          this.swiperList[1].total = res.result.monthActive;
        });
    },
    //收益汇总
    getUserIncome() {
      this.$u.api
        .getUserIncome()
        .then((res) => {
          this.swiperList[0].number = res.result.today_income;
          this.swiperList[0].total = res.result.month_income;
        });
    },
    //饼图 datasDataPie
    getDatasDataPie() {
      this.$u.api
        .datasDataPie({
          type: this.type,
        })
        .then((res) => {
          if (res.status == 200) {
            let temporaryPieData = { series: [{ data: res.result }] };
            setTimeout(() => {
              this.pieData = temporaryPieData;
            }, 500);
          }
        });
    },
    //折线图 datasDataLine
    getDatasDataLine() {
      this.$u.api
        .datasDataLine({
          type: this.type,
          limit: this.limit,
        })
        .then((res) => {
          this.lineData.categories = res.result.X;
          this.lineData.series[0].data = res.result.Y;
          let areadata = JSON.parse(JSON.stringify(this.lineData));
          areadata.series = areadata.series.reverse();
          setTimeout(() => {
            this.chartsDataLine2 = areadata;
          }, 500);
        });
    },
  },
};
</script>

<style lang="scss">
.swiperView {
  .s-container {
    width: 100%;
    padding: 50rpx 0;
    height: 400rpx !important;
    .swiper-item {
      height: 100%;
      box-sizing: border-box;
      position: relative;
      .swiperItemView {
        background-color: #f33;
        opacity: 0.5;
        height: 300rpx;
        transform: scale(0.9, 0.9);
        border-radius: 20rpx;
        padding: 30rpx 40rpx 0;
        .title {
          text {
            font-size: 36rpx;
            color: #fff;
            font-weight: bold;
            padding-right: 5rpx;
          }
        }
        .tip {
          font-size: 24rpx;
          color: #fff;
          padding-top: 5rpx;
        }
        .oneNumber {
          padding-top: 10rpx;
          font-size: 60rpx;
          color: #fff;
          font-family: "numberFont";
          font-weight: bold;
          letter-spacing: 4rpx;
        }
        .total {
          border-top: 2rpx solid #fff;
          margin-top: 16rpx;
          height: 88rpx;
          color: #fff;
          font-size: 28rpx;
          text {
            padding-left: 10rpx;
            font-size: 36rpx;
            font-family: "numberFont";
            letter-spacing: 2rpx;
          }
        }
      }
      &.active {
        .swiperItemView {
          opacity: 1;
          transition: all 0.1s ease-in 0s;
          z-index: 9;
          transform: scale(1, 1);
          transition: transform 0.1s;
        }
      }
    }
  }
}
.pieMain {
  padding: 30rpx 30rpx 0;
  background-color: #fff;
  .pieBox {
    .title {
      font-size: 36rpx;
      font-weight: bold;
    }
    .charts-box {
      width: 100%;
      height: 250px;
    }
    .picList {
      padding: 0 50rpx;
      .item {
        height: 100rpx;
        view {
          &:nth-of-type(1) {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
          }
          &:nth-of-type(2) {
            font-size: 24rpx;
            text {
              font-size: 38rpx;
              font-weight: bold;
              font-family: "numberFont";
              letter-spacing: 3rpx;
              color: #fb4535;
            }
          }
        }
      }
    }
  }
}
.lineChartsMain {
  border-top: 10rpx solid #f1f1f1;
  background-color: #fff;
  padding: 30rpx;
  .lineChartsBox {
    .title {
      font-size: 36rpx;
      font-weight: bold;
    }
    .charts-box {
      width: 100%;
      height: 250px;
    }
    .tab {
      height: 80rpx;
      border: 2rpx solid #f1f1f1;
      view {
        width: 100%;
        text-align: center;
        font-size: 28rpx;
        &.active {
          font-weight: bold;
          color: #fb4535;
        }
      }
    }
  }
}
</style>
